<template>
  <div>
    <!-- 顶部 -->
    <!-- <van-row>
      <van-col :span="24" class="header">黑马优购</van-col>
    </van-row>-->
    <van-nav-bar title="黑马优购" :left-arrow ='false' :fixed="true"  />
   <div class="maigin">
      <!-- 轮播图 -->
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img class="lazyimg" v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
    <!-- 分类 -->
    <van-grid class="vangrid" :icon-size="iconsize" :border="false">
      <van-grid-item
        :key="index"
        v-for="(item,index) in homeClassList"
        :to="item.navigator_url"
        :icon="item.image_src"
      />
    </van-grid>
    <!-- 商品展示 -->
    <div class="showGoods" :key="index" v-for="(item,index) in floorist">
      <van-row>
        <van-col span="8">
          <img class="imgTitle" :src="item.floor_title.image_src" alt />
        </van-col>
      </van-row>
      <div>
        <van-row>
          <van-col span="8">
            <img :src="item.product_list[0].image_src" alt />
          </van-col>
          <van-col span="8">
            <!--  -->
            <van-row>
              <van-col span="24">
                <img :src="item.product_list[1].image_src" alt />
              </van-col>
              <van-col span="24">
                <img :src="item.product_list[2].image_src" alt />
              </van-col>
            </van-row>
          </van-col>
          <!--  -->
          <van-col span="8">
            <van-row>
              <van-col span="24">
                <img :src="item.product_list[3].image_src" alt />
              </van-col>
              <van-col span="24">
                <img :src="item.product_list[4].image_src" alt />
              </van-col>
            </van-row>
          </van-col>
        </van-row>
      </div>
    </div>
   </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //   轮播图
      images: [],
      //   分类数据
      homeClassList: [],
      iconsize: '60px',
      //   楼层liebiao
      floorist: []
    }
  },
  methods: {
    async swiperdata() {
      const { data: res } = await this.$http.get('/home/swiperdata')
      //   console.log(res.message)
      const ress = res.message
      if (res.meta.status !== 200) return this.$notify('获取轮播图失败')
      //  this.$notify('通知内容')
      ress.forEach(item => this.images.push(item.image_src))
      //   console.log(this.images)
    },
    // 首页分类
    async homeClass() {
      const { data: res } = await this.$http.get('/home/catitems')
      if (res.meta.status !== 200) return this.$notify('获取首页分类失败')
      this.homeClassList = res.message
      console.log(this.homeClassList)
    },
    // 获取楼层
    async floordata() {
      const { data: res } = await this.$http.get('/home/floordata')
      if (res.meta.status !== 200) return this.$notify('商品展示获取失败')

      this.floorist = res.message
      console.log(this.floorist)
    }
  },
  created() {
    //   获取轮播图数据
    this.swiperdata()
    // 获取首页分类数据
    this.homeClass()
    // 获取首页楼层
    this.floordata()
  }
}
</script>
<style lang="css" scoped>
.van-nav-bar {
  background-color: #d81e06;
  text-align: center;
}
.van-nav-bar__title {
    color: #fff;

}
.maigin {
  margin-top: 44px;
}
img {
  width: 100%;
}
.van-icon__image {
  width: 100%;
}
.lazyimg {
  height: 200px;
}
.imgTitle {
  width: 300px;
}
.showGoods {
  padding: 10px 0;
}
</style>
